<template>
  <div class="setup-function-course">
    <h2>组合式 API：setup 函数基础</h2>
    <p class="intro">
      本示例演示如何在 <code>setup()</code> 中定义响应式数据与事件函数，并返回给模板使用。
    </p>

    <section class="demo">
      <h3>交互演示</h3>
      <SetupFunction />
    </section>

    <section class="tips">
      <h3>关键要点</h3>
      <ul>
        <li><code>setup()</code> 是组合式 API 的入口函数。</li>
        <li>使用 <code>reactive</code> 创建响应式对象。</li>
        <li>返回的对象会暴露给模板，可直接使用。</li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import SetupFunction from '@/components/zuheapi/setupfunction.vue'
</script>

<style scoped>
.setup-function-course {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
h2 {
  margin-top: 0;
  color: #42b883;
}
.intro {
  line-height: 1.6;
  color: #555;
}
.demo {
  margin: 24px 0;
  padding: 16px;
  background: #f7f8fa;
  border-radius: 6px;
}
.tips ul {
  padding-left: 20px;
  line-height: 1.8;
}
code {
  background: #f1f1f1;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
}
</style>